<template> 
  <div id="footer">
    <div id="main-nav">
      <ul class="flex-box">
        <li @click="navActive(1)"><svg class="icon" aria-hidden="true">
              <use :xlink:href="activeState==1?'#icon-diary-index-active':'#icon-diary-index-common'"></use>
            </svg>
            <p>首页</p></li>
        <li @click="navActive(2)"><svg class="icon" aria-hidden="true">
              <use :xlink:href="activeState==2?'#icon-diary-search-active1':'#icon-diary-search-common'"></use>
            </svg>
            <p>发现</p></li>
        <li @click="navActive(3)"><svg class="icon" aria-hidden="true">
              <use :xlink:href="activeState==3?'#icon-diary-mall-active':'#icon-diary-mall-common'"></use>
            </svg>
            <p>商城</p></li>
        <li @click="navActive(4)"><svg class="icon" aria-hidden="true">
              <use :xlink:href="activeState==4?'#icon-diary-message-active':'#icon-diary-message-common'"></use>
            </svg>
            <p>消息</p></li>
        <li @click="navActive(5)"><svg class="icon" aria-hidden="true">
              <use :xlink:href="activeState==5?'#icon-diary-geren-active':'#icon-diary-geren-common'"></use>
            </svg>
            <p>我的</p></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "Footer",
  data() {
    return {
      activeState: 1
    };
  },
  computed: {},
  methods: {
    navActive(n) {
      this.activeState = n;
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
#footer {
  width: 100%;
  height: r(90);
  background: #fff;
  position: fixed;
  top: 100vh;
  margin-top: r(-90);
  left: 0;
  z-index: 9999;
  border-top: 1px solid rgba($color: #000000, $alpha: 0.06);
  #main-nav {
    width: 100%;
    height: 100%;
    ul {
      width: 100%;
      height: 100%;
      li {
        width: 100%;
        font-size: r(48);
        p {
          font-size: r(22);
          color: #666;
          padding-top: r(4);
        }
      }
    }
  }
}
</style>
